<!-- 登录 -->
<template>
	<div>
		<text class="form-title">注册信息</text>
		<regForm :formInline="formInline" :btnText="btnText" :formItem="formItem" @onSubmit="onSubmit"></regForm>
		<view class="to-login">
			<span @click="toLogin">已有账号，直接登录</span>
		</view>
		<view class="footer" v-show="hidshow">
				注册即表示同意<text style="color: #52afd9;">《用户使用协议》</text>及<text style="color: #52afd9;">《隐私政策》</text>
		</view>
	</div>

</template>

<script>
	import regForm from "../../components/current/vForm.vue";
	import baseUrl from '../../config.js';

	export default {
		components: {
			regForm
		},
		data() {
			return { 
				btnText: "注册",
				//表格参数
				formItem: [{
						type: 'input',
						label: "手机号",
						inputType:'number',
						placeholder: "请输入手机号码",
						focus: true,
						clumn: 'account'
					}, {
						type: 'input',
						inputType: 'password',
						label: "登录密码",
						placeholder: "请输入密码",
						clumn: 'password'
					}, {
						type: 'input',
						inputType: 'password',
						label: "确认密码",
						placeholder: "请再次输入密码",
						clumn: 'enterPwd'
					},
					// {
					// 	type: 'input',
					// 	inputType:'number',
					// 	inputEnd: 'code',
					// 	label: '验证码',
					// 	placeholder: '请输入验证码',
					// 	clumn: 'code'
					// }
				],
				//表单字段数据
				formInline: {
					account: "",
					password: "",
					enterPwd: "",
					// code:""
				},
				docmHeight: document.documentElement.clientHeight, //默认屏幕高度
				showHeight: document.documentElement.clientHeight, //实时屏幕高度
				hidshow: true //显示或者隐藏footer
			}
		},
		mounted() {
			// window.onresize监听页面高度的变化
			window.onresize = () => {
				return (() => {
					this.showHeight = document.body.clientHeight;
				})()
			}
		},
		watch: {
			showHeight: function() {
				if (this.docmHeight > this.showHeight) {
					this.hidshow = false
				} else {
					this.hidshow = true
				}
			}
		},
		computed: {
			verify: function() {
				if (!this.formInline.account) {
					return {
						"flag": false,
						"msg": '请输入账号！'
					};
				}
				if (!this.formInline.password) {
					return {
						"flag": false,
						"msg": '请输入密码！'
					};
				}
				if (!this.formInline.enterPwd) {
					return {
						"flag": false,
						"msg": '请再次输入密码！'
					};
				}
				if (this.formInline.enterPwd != this.formInline.password) {
					return {
						"flag": false,
						"msg": '两次输入密码不一致！'
					};
				}
				return {
					"flag": true,
					"msg": 'success'
				};
			}
		},
		methods: {
			toLogin() {
				uni.redirectTo({
					url: "login",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onSubmit() {
				console.log(this.isAgree)
				if (!this.verify.flag) {
					uni.showToast({
						title: this.verify.msg,
						icon: 'none',
						duration: 2000
					});
					return;
				};
				//请求注册用户服务端
				uni.request({
					url: this.baseUrl + 'api/register',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						userName: this.formInline.account,
						password: this.formInline.password,
						verify: this.formInline.enterPwd,
					},
					method: 'POST',
					success: (res) => {
						console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						if(res.data.code == 0){
							setTimeout(function () {
							    uni.navigateTo({
							    	url:'login'
							    });
							}, 2000);
						}
						console.log('request success');
					}
				})
			},
		}
	}
</script>

<style>
	.form-title {
		padding: 0 5%;
		color: rgb(136, 136, 136);
		line-height: 60rpx;
	}

	.to-login {
		padding: 30rpx 5% 0 5%;
		color: #007AFF;
		text-align: right;
	}

	.footer {
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		text-align: center;
		color: #ababab;
	}
</style>
